<script >
export default {
  name: 'StatiscalChart',
  props: {
    data: {
      type: Object,

    },
    chooseIndex:{
      type: Number,
    }
  },
  computed: {
    option1() {
      return {
        title: {
          text: "年度销售额",
          textStyle: {
            fontSize: 14,
          },
        },
        xAxis: {
            type: 'category',
            data: this.data.saleFulleYearAxis
          },
          yAxis: {
            type: 'value'
          },
        series: [
          {
            data: this.data.saleFulleYear,
            type: "bar",
            color: "lightblue",
            barWidth: "40%",
          },
        ]
      }
    },
    option1() {
      return {
        title: {
          text: "年度销售额",
          textStyle: {
            fontSize: 14,
          },
        },
        xAxis: {
            type: 'category',
            data: this.data.saleFulleYearAxis
          },
          yAxis: {
            type: 'value'
          },
        series: [
          {
            data: this.data.saleFulleYear,
            type: "bar",
            color: "lightblue",
            barWidth: "40%",
          },
        ]
      }
    },
    option2() {
      return {
        title: {
          text: "年度访问量",
          textStyle: {
            fontSize: 14,
          },
        },
        xAxis: {
            type: 'category',
            data: this.data.visitFullYeadAxis
          },
          yAxis: {
            type: 'value'
          },
        series: [
          {
            data: this.data.visitFullYear,
            type: "bar",
            color: "lightblue",
            barWidth: "40%",
          },
        ]
      }
    },
  },
  watch: {
    chooseIndex(newValue,oldValue){
      console.log(newValue,oldValue)
    }
  }

}
</script>
<template>
  <div class="Chart" >
    <v-chart :option="this.chooseIndex == 1? option1:option2" style="width: 100%;height: 400px"></v-chart>
  </div>
</template> 
<style scoped>
.Chart{
  width:843px;
}
</style>